{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<script type="text/javascript" src="/plugins/tinymceeditor/static/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="/plugins/tinymceeditor/static/index/tinymceeditor.js"></script>
<div id="app" v-cloak>
    <div class="el-blog-publish-warp">
        <div class="el-warp">
            <div class="el-blog-publish">
                <div class="left">
                    <div class="header">
                        新建帖子
                        <span style="font-size: 14px; line-height: 24px; color: rgb(138, 145, 159); margin-left: 16px; font-weight: normal;">
                            {{saveStatus}}
                        </span>
                    </div>
                    <div class="item">
                        <el-input v-model="publishTitle" maxlength="60" placeholder="请添加标题..." show-word-limit></el-input>
                    </div>
                    <div class="item">
                        <el-editor v-model="publishContent" placeholder="请添加内容..."></el-editor>
                    </div>
                </div>
                <div class="right">
                    <div class="header">
                        <span style="color: rgb(255, 94, 84); vertical-align: middle; line-height: 1;">*</span>发布板块
                    </div>
                    <div class="item-warp">
                        <el-button 
                            v-for="(item, index) in catalog" 
                            class="item" 
                            size="small"
                            :class="{active: publishCatalog.indexOf(item.id) != -1}"
                            @click="choose(item.id)">
                            {{item.title}}
                        </el-button>
                    </div>
                    <div v-if="verifySrc != ''" style="display: flex;margin-bottom: 20px">
                        <img @click="verify()" :src="verifySrc" style="width: 160px;height:40px">
                        <el-input v-model="publishCode" style="width:140px" placeholder="请输入验证码">
                    </div>
                    <el-button class="publish" type="primary" :disabled="disabled" @click="save()" v-loading="loading">发帖</el-button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var catalog = {:json_encode(catalog_level(2, 'blog'))};
    var config = {:json_encode(blog_config())};
    new Vue({
        el: '#app',
        data() {
            return {
                saveStatus: '文章将自动保存至草稿箱',
                publishTitle: localStorage.publishTitle, 
                publishContent: localStorage.publishContent, 
                publishCatalog: [catalog[0]['id']],
                publishRcode: '',
                publishCode: '',
                verifySrc: '',
                loading: false,
            }
        },
        computed: {
            disabled() {
                if (this.publishTitle != '' && this.publishContent != '' && this.publishCatalog != '') {
                    return false;
                } else {
                    return true;
                }
            }
        },
        created() {
            this.verify();
        },
        methods: {
            verify() {
                let self = this;
                if (config.captcha == 1) {
                    post('api/config/verify', {}, function(res){
                        if (res.status === "success") {
                            self.publishRcode = res.data.code;
                            self.verifySrc = res.data.src;
                        } else {
                            self.$notify({showClose: true, message: res.message, type: res.status});
                        }
                    });
                }
            },
            save() {
                let self = this;
                let data = {
                    title: self.publishTitle, 
                    content: self.publishContent, 
                    catalog_id: self.publishCatalog, 
                    rcode: self.publishRcode, 
                    code: self.publishCode
                };
                self.loading = true;
                post('api/blog/userBlog/save', data, function(res){
                    self.loading = false;
                    if (res.status === "success") {
                        localStorage.publishTitle   = '';
                        localStorage.publishContent = '';
                        location.href = index_url('blog/user/blogUpdate', {id: res.data.id});
                    }
                    self.$notify({showClose: true, message: res.message, type: res.status});
                });
            },
            choose(id) {
                let index = this.publishCatalog.indexOf(id);
                if (index == -1) {
                    this.publishCatalog.push(id)
                } else {
                    this.publishCatalog.splice(index, 1);
                }
            }
        },
        watch: {
            publishTitle(v) {
                localStorage.publishTitle = v;
                this.saveStatus = '文章已保存至草稿箱';
            },
            publishContent(v) {
                localStorage.publishContent = v;
                this.saveStatus = '文章已保存至草稿箱';
            }
        }
    });
</script>
{include file="common/footer"}